<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            /**
             * 基本选择器
             */
            // $('#aaa').css('background','red')
            // $('.bbb').css('background','red') // 隐式迭代
            // $('div').css('background','red') // 隐式迭代

            /**
             * 层次选择器
             */
            // $('div span').css('color','red')
            // $('div > span').css('color','red')

            /**
             * 属性选择器
             */
            // $('div[id]').css('color','red')
            // $('div[id=hello]').css('color','red')
            // $('div[id!=hello]').css('color','red')
            // $('div[id^=h]').css('color','red')
            // $('div[id$=p]').css('color','red')
            // $('div[id*=lp]').css('color','red')
            // $('div[id][title^=wo]').css('color','red')

            /**
             * 过滤选择器
             */
            // $('li:first').css('color','red')
            // $('li:last').css('color','red')
            // $('li:even').css('color','red')
            // $('li:odd').css('color','red')
            // $('li:eq(2)').css('color','red')
            $('li:gt(2)').css('color','red')


        })
    </script>
</head>
<body>
    <div id="aaa">hello</div>
    <p class="bbb">world</p>
    <div class="bbb">welcome</div>
    <hr>

    <div>
        <span>aaa</span>
    </div>
    <div>
        <p>
            <span>bbb</span>
        </p>
    </div>
    <hr>

    <div id="hello" title="world">java</div>
    <div id="help">web</div>
    <hr>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>

</body>
</html>